import * as echarts from '../../../ec-canvas/echarts';

/**
 * Once chart is init event 'chartInit' will be triggered. Chart instance will be passed out.
 */
Component({
  properties: {
    option: Object,
  },
  data: {
    ec: {},
    _chart: null,
  },
  observers: {
    'option': function () {
      (this.data._chart as any)?.setOption(this.data.option);
    },
  },
  lifetimes: {
    ready: function (): void {
      this._initChart();
    },
  },
  methods: {
    _initChart: function (): void {
      this.setData({
        ec: {
          onInit: (canvas: any, width: any, height: any, dpr: any): any => {
            const chart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr,
            });

            this.data._chart = chart;
            this.triggerEvent('chartInit', { chart: chart });        
            canvas.setChart(chart);
            chart.setOption(this.data.option);
          
            return chart;
          },
        },
      });
    },
  },
});